{% extends "base.html" %}
{% load static %}

{% block title %}Контакты - МОЙ НЕ САМ{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <h1 class="mb-4">Контактная информация</h1>
            
            <div class="contact-info">
                <div class="mb-4">
                    <h5><i class="bi bi-geo-alt-fill text-primary"></i> Адрес</h5>
                    <p class="ms-4">г. Москва, ул. Примерная, д. 123, офис 45</p>
                </div>
                
                <div class="mb-4">
                    <h5><i class="bi bi-telephone-fill text-primary"></i> Телефон</h5>
                    <p class="ms-4">+7 (495) 123-45-67</p>
                </div>
                
                <div class="mb-4">
                    <h5><i class="bi bi-envelope-fill text-primary"></i> Email</h5>
                    <p class="ms-4">info@мойнесам.ru</p>
                </div>
                
                <div class="mb-4">
                    <h5><i class="bi bi-clock-fill text-primary"></i> Время работы</h5>
                    <p class="ms-4">Пн-Пт: 9:00 - 18:00<br>Сб-Вс: 10:00 - 16:00</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <h2 class="mb-4">Мы на карте</h2>
            <div class="map-container border rounded p-3 bg-light">
                <div class="text-center p-5 bg-white rounded">
                    <i class="bi bi-map display-1 text-muted"></i>
                    <p class="mt-3 text-muted">Карта расположения магазина</p>
                    <small class="text-muted">г. Москва, ул. Примерная, д. 123</small>
                </div>
                <div class="mt-3 text-center">
                    <small class="text-muted">Скриншот карты с расположением нашего магазина</small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.contact-info h5 {
    color: #2c3e50;
    font-weight: 600;
}
.contact-info p {
    color: #555;
    font-size: 1.1em;
}
.map-container {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>
{% endblock %}